{% load static %}
{% load advisor_extras %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Advisor</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="buckymaler.com">
    <link rel="stylesheet" href="{% static '/css/main.css' %}">

    <style>
      #choice a {
          text-decoration:none;
          color: black;
          font-family: 微软雅黑;
      }
      #choice div {
          border: 5px solid;
          border-radius: 25px;
      }
      #choice div:hover {
          border-color: #FFF498;
      }
    </style>

  </head>
  <body>
    <section id="hero" style="height: 1000px"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 163.5" style="enable-background:new 0 0 100 163.5;" xml:space="preserve">
<g transform="translate(0.000000,749.000000) scale(0.100000,-0.100000)">
	<path d="M352.5,7487.4C351.4,7484.3,0,5858.4,0,5856.4c0-0.7,74-0.9,164.1-0.7l164.3,0.7l31.6,174.6l31.6,174.6h106.9h106.9l24.4-127.7c13.5-70.3,28.6-149.1,33.6-175l9.2-47.6h163.5H1000l-1.1,4.8c-2.8,11.1-350.7,1626.1-350.7,1627.9c0,1.1-61.1,2-147.3,2C384.8,7490,353.1,7489.3,352.5,7487.4z M542.3,6713.5c22.3-163.5,40.4-298.8,40.4-300.5c0-2.8-10.7-3.3-84-3.3h-84.2l1.3,7.2c2.2,12.7,84,590.8,84,593.4C499.8,7022.7,507,6971.7,542.3,6713.5z"/>
</g>
</svg>
      <header>
        <div class="nav-toggle">
          <p>Menu</p><span></span>
        </div>
        <ul class="nav">
          <li><a href="/">主页</a></li>
          <li><a href="#about">关于本站</a></li>

            {% for url, city in city_list.items %}
                <li><a href="{{ city }}">{{ url }}</a></li>
            {% endfor %}

          <!-- <li><a href="#full-slide">Work</a></li>
          <li><a href="#contact">Contact</a></li> -->
        </ul>
      </header>
      <div class="wrapper" style="height: 1000px">
      {% if index %}
            <div align="center" style="width: 100%">
              <h1><strong style="font-family: 'Microsoft YaHei UI Light'; font-size: 50px">请选择要查询的城市</strong></h1>

                <ul id="choice" style="width: 100%; list-style: none; text-align: center; display: inline-block;">
                {% for url, city in city_list.items %}
                    <li style="display: inline-block; width: 100px; height: 100px; padding: 20px 20px 20px 20px">
                        <a href="{{ city }}">
                            <div align="center" style="width: 100px; height: 100px;">
                                <strong style="position: relative; top: 37%">{{ url }}</strong>
                            </div>
                        </a>
                    </li>
                {% endfor %}
                </ul>

            </div>
      {% endif %}

      {% if city %}
        {% show_stops_form city new_form start_error end_error form %}
      {% endif %}

      {% if result %}
          {% if success %}
          <div class="success">
              <h6 style="width: 100%; margin: 5px 5px 5px 5px;">计算用时: {{ time }}s</h6>
{#              <div class="res">#}
                  <h5 style="margin: 5px 5px 5px 5px;">以下为最短(最少路段)路线, 总距离(路段数):{{ line_1_cost }}</h5>
                  <ul class="lines">
                      {% for u in stops_1 %}
                          {% if forloop.first %}
                          <li class="unit" style="width: 100px">
                              <div class="stop" style="width: 100%">
                                  <p>{{ u.to_stop }}</p>
                              </div>
                          </li>
                          {% else %}
                          <li class="unit">
                              <div class="line">
                                  <p>{{ u.to_line }} {{ u.to_direction }}</p>
                              </div>
                              <div class="stop">
                                  <p>{{ u.to_stop }}</p>
                              </div>
                          </li>
                          {% endif %}
                      {% endfor %}
                  </ul>
{#              </div>#}
{#              <div class="res">#}
                  <h5 style="margin: 5px 5px 5px 5px;">以下为最少换乘路线, 总乘坐路线数:{{ line_2_cost }}</h5>
                  <ul class="lines">
                      {% for u in stops_2 %}
                          {% if forloop.first %}
                              <li class="unit" style="width: 100px">
                                  <div class="stop" style="width: 100%">
                                      <p>{{ u.to_stop }}</p>
                                  </div>
                              </li>
                          {% else %}
                              <li class="unit">
                                  <div class="line">
                                      <p>{{ u.to_line }} {{ u.to_direction }}</p>
                                  </div>
                                  <div class="stop">
                                      <p>{{ u.to_stop }}</p>
                                  </div>
                              </li>
                          {% endif %}
                      {% endfor %}
                  </ul>
{#              </div>#}
          </div>
          <style>
              .success {
                  width: 100%;
                  position: relative;
                  top: -30px;
              }
              .res {
                  width: 100%;
                  height: 45%;
              }
              .lines {
                  width: 120%;
                  position: relative;
                  left: -10%;
                  margin: 5px 5px 5px 5px;
                  padding: 5px 5px 5px 5px;
                  display: inline-block;
                  float: left;
                  text-decoration:none;
                  font-family: 微软雅黑;
              }
              .unit {
                  display: inline-block;
                  float: left;
                  width: 180px;
                  height: 90px;
                  text-align: center;
              }
              .line {
                  display: inline-block;
                  float: left;
                  background-image: url("{% static '/img/line.png' %}");
                  width: 50%;
                  height: 100%;
                  background-size: 100% 100%;
                  word-wrap: break-word;
                  word-break: break-all;
              }
              .line p {
                  width: 100%;
                  word-wrap: break-word;
                  word-break: break-all;
                  font-size: 12px;
              }
              .stop {
                  display: inline-block;
                  float: left;
                  background-image: url("{% static '/img/stop.png' %}");
                  width: 50%;
                  height: 100%;
                  background-size: 100% 100%;
                  word-wrap: break-word;
                  word-break: break-all;
              }
              .stop p {
                  width: 100%;
                  word-wrap: break-word;
                  word-break: break-all;
                  font-size: 12px;
              }
          </style>
          {% else %}
              <div align="center" style="width: 100%">
                  <h1><strong style="font-family: 'Microsoft YaHei UI'; font-size: 30px; color: #FF0000;">暂时未查询到可行路线</strong></h1>
              </div>
          {% endif %}

      {% endif %}

{#        <!-- <div class="photographer"><img src="{% static '/img/hero.png' %}" alt="Photographer"></div> -->#}
      </div>
    </section>

    <section id="about"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 203.6" style="enable-background:new 0 0 100 203.6;" xml:space="preserve">
<g transform="translate(0.000000,749.000000) scale(0.100000,-0.100000)">
	<path d="M0,6471.9V5454.2h206.5h206.5v436.2v436.2h7.6c19.8,0.3,107.9,5.7,128.3,8.2c90.2,10.9,154.9,29.4,220.4,62.8c141.1,72.6,213.3,213.3,228.3,444.1c8.7,135.3-7.3,272.3-42.9,368.3c-48.6,130.5-131,212.8-253.8,253.8c-15.5,5.2-43.5,12.8-62.2,17.1l-34,7.3l-302.2,0.8L0,7490V6471.9z M490.5,7190.8c51.1-13.6,71.2-28.8,92.9-69.8c22.3-41.9,26.4-81.5,24.7-243.2l-1.4-115l-8.4-32.1c-10.9-40.5-13.6-45.4-35.6-67.9c-21.2-22-30.7-27.4-60.6-34.5c-18.8-4.3-68.2-10.9-82.6-10.9c-3.3,0-3.8,44-3.8,291.1v291.3l26.6-1.6C456.8,7197.3,478.6,7194,490.5,7190.8z"/>
</g>
</svg>
        <div class="wrapper">
            <div class="blurb">
                <h2>About the Transport Advisor</h2>
                <p>一个简洁的, 关于公交线路的web应用, 用户在网页端选择城市以及始发站与终点站, 后台返回最少站点路线以及最少换乘路线。
                    <br>
                    <br>

                </p>
                <div class="social"><a href="#"><i class="icon-facebook"></i></a><a href="#"><i class="icon-instagram"></i></a><a href="#"><i class="icon-twitter"></i></a><a href="#"><i class="icon-pinterest-p"></i></a></div>
            </div>
        </div>
    </section>

    <HR>
    <div style="text-align: center; padding: 0px 0px 30px 0px;"><strong>powered by Apollo</strong></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="assets/js/vendor/jquery-2.2.4.min.js"><\/script>')</script>
    <script src="{% static '/js/functions-min.js' %}"></script>
  </body>
</html>
